devfandomcom-20200223-history
Colors
This is a library for handling colors in the Wikia environment. This library serves two purposes: # It provides a list of the most important colors on the current page, so you can easily adapt your addon's appearance to the host wiki's color schome. # And it provides a bunch of functions for manipulating colors, so you can build your own color scheme on top of the host wiki's color scheme Colors Applying the colors The easiest way to use the above colors is to write regular CSS but use pseudo-colors instead of regular ones: a { color: $link; } Add all of these rules to a string and then pass it to dev.colors.css(). dev.colors.css() will replace all pseudo-values and append the stylesheet to the document head: Example 1: $(document.head).css( 'a { color: $link; }' ); You can use an optional second parameter to add pseudo-values of your own. Note that you need to prefix the name of your own values with a $ sign: Example 2: $(document.head).css( 'a { color: $link; background: $myBackGround; }', { myBackGround: 'black' }); Manipulating Colors To manipulate color you first need to create a color object. dev.colors provides three Factories: // parse allows you to create a color object from a string: var red = dev.colors.parse("#FF0000"); var red = dev.colors.parse("rgb(255, 0, 0)"); var red = dev.colors.parse('red'); // the values of dev.colors.wikia are strings too: var body = dev.colors parse(dev.colors.wikia.body); // fromRgb allows you to set the RGB values numerically: // (values must be between 0 and 255) var red = dev.colors.fromRgb(255, 0, 0); // fromHsl allows you to use the HSL color model: // (values must be between 0 and 1) var red = dev.colors.fromHsl(0, 1, 1); Once you have a color object you can manipulate it: // lighten red by 20 percent: var lightRed = red.lighten(20); // desaturate red by 20 percent: var paleRed = red.saturate(-20); // rotate the hue by 180 degrees to // get the complimentary color: var cyan = red.rotate(180); // mix two colors: var orange = red.mix('yellow'); Converting Color Objects to Strings When you've mixed and matched the colors you like, you will want to convert them back into strings so you can use them in CSS: console.log("red: " + red.hex()); // outputs: "red: #FF000" console.log("red: " + red.rgb()); // outputs: "red: rgb(255, 0, 0)" console.log("red: " + red.hsl()); // outputs: "hsl: hsl(0, 1, 1)" // hex format is the default: console.log("red: " + red); // outputs: "red: #FF000" Methods of dev.colors dev.colors.parse() parameters: # color (string) returns Color object The paramater may be in * hex notation: "#FF0000" or in * rgb notation: "rgb(255, 0, 0)" or * a color name: "red" Note that all of the colors in the dev.colors.wikia object are strings as well and need to be parsed into Color objects before you can process them dev.colors.fromRgb() parameters: # red # green # blue returns Color object creates a Color object from the given RGB values. Parameters must be numbers and between 0 and 255 dev.colors.fromHsl() parameters: # hue # saturation # lighness returns Color object creates a Color object from the given HSL values. Parameters must be numbers and between 0 and 1 Methods of Color Objects Color.rotate() Color.saturate() Color.lighten() Color.mix() Color.isBright() Color.isColor() Color.red() Color.green() Color.blue() Color.hue() Color.saturation() Color.lightness() Color.rgb() Color.hsl() Color.hex() Color.toString()